<template>
  <p>父 ziCar1: {{ ziCar1 }}</p>
  <p>父 ziCar2: {{ ziCar2 }}</p>
  <p>父 ziCar3: {{ ziCar3 }}</p>
  <p>父 num: {{ num }}</p>

  <br />
  <hr />
  <!--  :ziCar1="ziCar1"  v-bind="{
      ziCar1}"  -->
  <attrsChild
    :ziCar1="ziCar1"
    v-bind="{
      ziCar2,
      ziCar3,
      ziCar4,
      addNum,
    }"
  ></attrsChild>
</template>
<script setup lang="ts">
import { ref } from "vue";
import attrsChild from "@/components/sub/attrs-child.vue";
let ziCar1 = ref("ziCar1");
let ziCar2 = ref("ziCar2");
let ziCar3 = ref("ziCar3");
let ziCar4 = ref("ziCar4");
let num = ref(0);
let addNum = (value: number) => {
  num.value += value;
};
</script>
<style lang="scss" scoped></style>
